<template>
  <div style="width:100%;height:100%;" id="screen-Content"
    :class="[isTemplate && 'template-view-box', option.mode != 'edit' && !isTemplate && 'view-file-office']">
    <div id="monitorOffice" v-if="option.mode == 'edit'"></div>
    <div id="monitorOfficeView" v-else></div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  watch,
  onMounted,
  nextTick,
  onBeforeUnmount
} from 'vue'
import { handleDocType } from '@/utils/handleDocType'
import useUserInfoStore from '@/store/userInfo'
import { getStore } from "@/utils/store";
import { $permissionRole } from '@/utils/role'
import { useHookI18n } from '@/hooks/i18n'
const { locale, } = useHookI18n()

const userStore = useUserInfoStore()
const emit = defineEmits(["windowOpen"])
const props = defineProps({
  option: {
    type: Object,
    default() {
      return {}
    }
  },
  isTemplate: {
    type: Boolean,
    default: false
  },
  knowledgeInfo: {
    type: Object,
    default() {
      return {}
    }
  }
})
const docType = ref('')
const docEditor = ref<any>(null)
const isShow = ref(false)
const userIno = ref({})
// const libaryId = ref(route.query.id)
onMounted(() => {
  userIno.value = getStore({ name: "userInfo" });
  if (props.option.url && !docEditor.value) {
    nextTick(() => {
      setEditor(props.option)
    })
  }
})
watch(() => props.option, (newVal, oldVal) => {
  if (newVal.id != oldVal.id) {
    nextTick(() => {
      setEditor(newVal)
      docType.value = handleDocType(newVal.fileType)
    })
  }
}, { deep: true })
onBeforeUnmount(() => {
  if (docEditor.value !== null) {
    docEditor.value.destroyEditor();
    docEditor.value = null;
  }
})
function init() {
  isShow.value = true
  nextTick(() => {
    setEditor(props.option)
  })
}
function desTroy() {
  isShow.value = false
  if (docEditor.value !== null) {
    docEditor.value.destroyEditor();
    docEditor.value = null;
  }
}
function setEditor(option: any, keyAppend = '') {
  // debugger
  docType.value = handleDocType(option.fileType)
  docEditor.value = new DocsAPI.DocEditor(option.mode == 'view' ? "monitorOfficeView" : "monitorOffice", {
    document: {
      lang: locale.value == 'zh-CN' ? 'zh' : locale.value,
      fileType: option.fileType,
      // key: `${docType.value}-${option.id}-${keyAppend}`,
      key: `${option.id}`,
      title: option.title,
      permissions: {
        comment: option.comment, // 用于编辑预览的同步数据
        download: $permissionRole('document_down', props.knowledgeInfo.dcIdentifying) && false, //下载权限
        modifyContentControl: true,
        modifyFilter: true,
        print: option.comment,
        edit: true,//是否可以编辑: 只能查看，传false
        fillForms: option.isEdit,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
        review: option.isEdit, //跟踪变化
      },
      info: {},
      url: option.url
    },
    documentType: docType.value,
    mode: option.mode,
    editorConfig: {
      actionLink: null,
      mode: option.mode,
      callbackUrl: option.editUrl, //编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
      lang: locale.value == 'zh-CN' ? 'zh' : locale.value,//语言设置
      // 用户信息
      user: {
        "group": '',
        "id": userStore.userInfo.id,
        "name": userStore.userInfo.realName
      },
      customization: {
        // autosave: true,//是否自动保存
        // chat: option.isEdit,
        // comments: true,
        // 自定义-logo
        "logo": {
          // "image": userStore.tenantInfo.icon,
          // "imageDark": userStore.tenantInfo.icon,
          "url": window.location.origin + '/#/'
        },
        help: false,
        // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
        feedback: false,
        about: false,
        forcesave: false,
        submitForm: false,
        spellcheck: true,//拼写检查
        plugins: false,
      },
      "plugins": {
        "pluginsData": []
      },
    },
    events: {
      onAppReady: () => {
        console.log("初始化成功")
        emit("windowOpen")
      },
    },
    type: "desktop",
    width: "100%",
    height: "100%"
  });
}
function reSetEditor() {
  if (docEditor.value !== null) {
    docEditor.value.destroyEditor();
    docEditor.value = null;
  }
  init()
}
defineExpose({
  reSetEditor,
  desTroy,
  init
})
</script>
<style lang="scss" scoped>
.template-view-box {
  height: calc(100vh - 252px) !important;
}

.view-file-office {
  height: calc(100vh - 200px) !important;
}
</style>
